<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>每日报餐统计</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            padding: 20px 20px;
            background: rgba(242, 242, 242, 1);
        }
        .top{
            padding: 20px 20px;
            font-size: 15px;
            background: #ffffff;
        }
        .top p{
            margin: 10px  0;
        }
        .t-content{
            display:flex;
            justify-content: space-between;
            text-align: right;
            width: 68%;
        }
        .t-content>div{
            width: 25%;
            padding: 0 10px;
        }
        .leftTitle{
            margin-top: 10px;
        }
        .table-content>p{
            color: #999999
        }
        .table{
            display: flex;
            justify-content:flex-end;
            border-left: 2px solid rgba(242, 242, 242, 1);
        }
        .table div{
            margin: 0 10px;
        }
        .main{
            background: #ffffff;
            margin-top: 20px;
            padding:20px 20px;
        }
    </style>
    <!-- 引入 echarts.js -->
    <!-- cdn引入 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script> -->
    <!-- 本地引入 -->
</head>

<body>
    <div class="container">
        <div class="top">
            <h3>报餐统计</h3> 
            <div class="t-content">
                <div class="leftTitle">
                    <p><br></p>
                    <p>今日</p>
                    <p>明日</p>
                    <p>本月平均</p>
                </div>
                <div class="table-content">
                    <p>早餐(份)</p>
                    <div class="table">
                        <div>
                            <p id="todayBreakfast"></p>
                            <p id="tomorrowBreakfast"></p>
                            <p id="averBreakfast"></p>
                        </div>
                    </div>

                </div>
                <div class="table-content">
                    <p>午餐(份)</p>
                    <div class="table">
                        <div>
                            <p id="todayLunch"></p>
                            <p id="tomorrowLunch"></p>
                            <p id="averLunch"></p>
                        </div>
                    </div>
                </div>
                <div class="table-content">
                    <p>晚餐(份)</p>
                    <div class="table">
                        <div>
                            <p id="todayDinner"></p>
                            <p id="tomorrowDinner"></p>
                            <p id="averDinner"></p>
                        </div>
                    </div>
                </div>
                <div class="table-content">
                    <p>其他餐(份)</p>
                    <div class="table">
                        <div>
                            <p id="todayOther"></p>
                            <p id="tomorrowOther"></p>
                            <p id="averOther"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main">
            <h3>每日报餐</h3>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="charts" style="width: 100%;height:528px;margin-left:-15px;"></div>
        </div>

    </div>
    
    <script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=2.4.0}"></script>
    <script src="../static/js/echarts.common.min.js" th:src="@{/js/echarts.common.min.js}"></script>
    <script type="text/javascript">
    
	    window.onresize = function(){
	    	location=location
	    }
	    
        var dom = document.getElementById("charts");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        var posList = [
            'left', 'right', 'top', 'bottom',
            'inside',
            'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
            'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
        ];

        app.configParameters = {
            rotate: {
                min: -90,
                max: 90
            },
            align: {
                options: {
                    left: 'left',
                    center: 'center',
                    right: 'right'
                }
            },
            verticalAlign: {
                options: {
                    top: 'top',
                    middle: 'middle',
                    bottom: 'bottom'
                }
            },
            position: {
                options: echarts.util.reduce(posList, function (map, pos) {
                    map[pos] = pos;
                    return map;
                }, {})
            },
            distance: {
                min: 0,
                max: 100
            }
        };

        app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            onChange: function () {
                var labelOption = {
                    normal: {
                        rotate: app.config.rotate,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        position: app.config.position,
                        distance: app.config.distance
                    }
                };
                myChart.setOption({
                    series: [{
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }, {
                        label: labelOption
                    }]
                });
            }
        };


        var labelOption = {
            normal: {
                show: false,
                position: app.config.position,
                distance: app.config.distance,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                rotate: app.config.rotate,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {
                        textBorderColor: '#fff'
                    }
                }
            }
        };

        option = {
            color: ['rgba(117, 176, 192, 1)', 'rgba(195, 174, 111, 1)', 'rgba(130, 194, 167, 1)', 'rgba(170, 139, 181, 1)', 'rgba(159, 121, 238,1)'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['早餐', '午餐', '晚餐', '其他餐']
            },
            toolbox: {
                show: false,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data : []
                    //data: ['2018-08-07', '2018-08-08', '2018-08-09', '2018-08-10', '2018-08-11','2018-08-12','2018-08-13']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitNumber:8,
                    // max:100,
                }
            ],
            series: [
                {
                    name: '早餐',
                    type: 'bar',
                    barGap: 0,
                    label: labelOption,
                    data : []
                    //data: [32, 33, 30, 33, 39,30,60]
                },
                {
                    name: '午餐',
                    type: 'bar',
                    label: labelOption,
                    data : []
                    //data: [22, 18, 19, 23, 29,70,60]
                },
                {
                    name: '晚餐',
                    type: 'bar',
                    label: labelOption,
                    data : []
                    //data: [50, 32, 20, 54, 87,78,80]
                },
                {
                    name: '其他餐',
                    type: 'bar',
                    label: labelOption,
                    data : []
                    //data: [50, 32, 20, 54, 87,78,80]
                }
            ]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        
        $.ajax({
            type: "get",
            async: true, //同步执行
            //url: "tets.json",
            url: ctx + "statistic/homeReport/list",
            dataType: "json", //返回数据形式为json
            success: function(data){
                //console.log(data.data.length);
                var array = data.data[5];
                $('#todayBreakfast').html(array.todayBreakfast?array.todayBreakfast:0);
                $('#todayLunch').html(array.todayLunch?array.todayLunch:0);
                $('#todayDinner').html(array.todayDinner?array.todayDinner:0);
                $('#todayOther').html(array.todayOther?array.todayOther:0);
                $('#tomorrowBreakfast').html(array.tomorrowBreakfast?array.tomorrowBreakfast:0);
                $('#tomorrowLunch').html(array.tomorrowLunch?array.tomorrowLunch:0);
                $('#tomorrowDinner').html(array.tomorrowDinner?array.tomorrowDinner:0);
                $('#tomorrowOther').html(array.tomorrowOther?array.tomorrowOther:0);
                $('#averBreakfast').html(array.averBreakfast?array.averBreakfast:0);
                $('#averLunch').html(array.averLunch?array.averLunch:0);
                $('#averDinner').html(array.averDinner?array.averDinner:0);
                $('#averOther').html(array.averOther?array.averOther:0);

                option.xAxis[0].data = data.data[0];
                option.series[0].data = data.data[1];
                option.series[1].data = data.data[2];
                option.series[2].data = data.data[3];
                option.series[3].data = data.data[4];

                //option.xAxis[0].data = ['2018-08-07', '2018-08-08', '2018-08-09', '2018-08-10', '2018-08-11','2018-08-12','2018-08-13'];
                
                //console.log(data.object[0].length);
                //option.xAxis[0].data = data.object[0];
                /* for(var i= 0,len=data.object[0].length;i<len;i++){
                    var json={};
                    var data2=data.object[0];
                    json.name=data.object[0][i];
                    json.value=data.object[1][i];
                    option.series[0].data[i]=json;
                    option.legend.data=data.object[0];
                    option2.xAxis[0].data=data.object[0];
                    option2.series[0].data=data.object[1];
                }
                myChart.clear();
                myChart.hideLoading();
                myChart.setOption(option);
                myChart2.clear();
                myChart2.hideLoading();
                myChart2.setOption(option2);// 使用刚指定的配置项和数据显示图表。 */
                
                myChart.clear();
                myChart.hideLoading();
                myChart.setOption(option);
            },
            error: function(errorMsg) {
                //alert("图表请求数据失败啦!");
                $.modal.msg(r.msg);
            }
        });

    </script>
</body>

</html>